<template>
  <div class="header">
    <div class="patharea">
      <span id="curpath">{{ curPath }}</span>
    </div>
    <div class="userarea">
      <span class="userarea-item">{{ userName }}</span>
      <el-dropdown class="userarea-item">
        <i class="el-icon-s-custom" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>Profile</el-dropdown-item>
          <el-dropdown-item>Logout</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      userName: this.$store.getters.userName,
      curPath: document.location.pathname,
    };
  },
  methods: {
    showpath() {
      console.log("this.$router.path :>> ", this.$router);
      console.log("document.location.path :>> ", document.location.pathname);
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.header {
  display: flex;
}
.patharea {
  width: 80%;
  text-align: left;
}
.userarea {
  display: flex;
  width: 20%;
}
.userarea-item {
  flex: 1;
  align-content: center;
}
</style>